<template>
	<view >
	<view style="background-color: #F95738;height: 60rpx;padding-top: 140rpx;">
		<van-tabs sticky swipeable  color="#F95738" type="card" animated>
		  <van-tab style="font-size: 10rpx;" title="医疗政策">
			  <view class="content">
				  <van-share-sheet
				    show:id="showShare"
				    title="立即分享给好友"
				    options:id="options"
				    bind:select="onSelect"
				    bind:close="onClose"
				  />
				<van-search shape="round" value:id=" value " style="width: 100%;" placeholder=" " />
			  	<view  style="background-color: #FAF0CA; width: 700rpx; border-radius:20rpx; height: 530rpx;padding-left: 20rpx;">
			  		<view><text style="font-size: 50rpx;font-weight: 800;">所在地区:{{location}}</text></view>
			  		<view><text style="font-size: 50rpx;font-weight: 800;">年龄:{{age}}</text></view>
			  		<view><text style="font-size: 50rpx;font-weight: 800;">性别:{{sex}}</text></view>
					<view style="margin-left: 550rpx;margin-top:-150rpx;">
						<image style="width: 100rpx; height: 100rpx;" src="../../static/gift.png"></image>
						<view style="font-weight: 1000;font-size: 40rpx;margin-left: -30rpx;">签到立领</view>
					</view>
			  		<view style="background-color: #333333;height: 5rpx;width: 720rpx;margin-top: 30rpx;margin-left: -20rpx;"></view>
			  		<view style="font-size: 50rpx;font-weight: 800;margin-left: 35rpx;">今日专属您的最新医疗政策</view>
					
					<view style="background-color: #F4D35E; width: 97%;height: 200rpx; border-radius: 20rpx;">
						<image  src="/static/loudspeaker.png" style="width: 60rpx; height: 60rpx; margin-top: 60rpx;"></image>
						<view style="font-size: 45rpx; font-weight: 900; margin-left: 80rpx;margin-top: -90rpx;">多项政策保障衔接，青岛全民补充医疗保险今年不再执行</view>
					</view>
			  	</view>
				
				<view style="background-color: #F95738; width: 90%; height: 5rpx; margin-top: 30rpx;"></view>
				<view style="font-size: 40rpx;">上拉更多信息</view>
				<view style="background-color: #F95738; width: 90%; height: 5rpx;"></view>
				<view style="font-size: 45rpx; font-weight: 900;">新冠疫苗作用多大？为何启动序贯加强免疫？权威解读来了</view>
				<image @click="gotovideo1" src="/static/image1.png" style="height: 350rpx;"></image>
				<image @click="gotovideo1" src="/static/play.png" style="width: 100rpx; height: 100rpx;margin-top: -200rpx;"></image>
				<view style="font-size: 45rpx; font-weight: 900;margin-top: 100rpx;height: 230rpx;">城镇职工和城乡居民政策范围内住院费用报销比例 分别达到80%和70%以上</view>
			  		
			  </view>
		  </van-tab>
		  <van-tab style="font-size: 10rpx;" title="福利">
			  <view v-show="flag" class="content">
			  				<van-search shape="round" value:id=" value " style="width: 100%;" placeholder=" " />
			  	<view  style="background-color: #FAF0CA; width: 700rpx; border-radius:20rpx; height: 530rpx;padding-left: 20rpx;">
			  		<view><text style="font-size: 50rpx;font-weight: 800;">所在地区:{{location}}</text></view>
			  		<view><text style="font-size: 50rpx;font-weight: 800;">年龄:{{age}}</text></view>
			  		<view><text style="font-size: 50rpx;font-weight: 800;">性别:{{sex}}</text></view>
			  					<view style="margin-left: 550rpx;margin-top:-150rpx;">
			  						<image style="width: 100rpx; height: 100rpx;" src="../../static/gift.png"></image>
			  						<view style="font-weight: 1000;font-size: 40rpx;margin-left: -30rpx;">签到立领</view>
			  					</view>
			  		<view style="background-color: #333333;height: 5rpx;width: 720rpx;margin-top: 30rpx;margin-left: -20rpx;"></view>
			  		<view style="font-size: 50rpx;font-weight: 800;margin-left: 35rpx;">今日专属您的最新福利政策</view>
			  					
			  					<view style="background-color: #F4D35E; width: 97%;height: 200rpx; border-radius: 20rpx;">
			  						<image  src="/static/loudspeaker.png" style="width: 60rpx; height: 60rpx; margin-top: 60rpx;"></image>
			  						<view style="font-size: 45rpx; font-weight: 900; margin-left: 80rpx;margin-top: -90rpx;">60岁以上老人出行有“特权”</view>
			  					</view>
			  	</view>
			  				
			  				<view style="background-color: #F95738; width: 90%; height: 5rpx; margin-top: 30rpx;"></view>
			  				<view style="font-size: 40rpx;">上拉更多信息</view>
			  				<view style="background-color: #F95738; width: 90%; height: 5rpx;"></view>
			  				<view style="font-size: 45rpx; font-weight: 900;">老人将享受这些福利政策，每一条都是好东西</view>
			  				<image @click="gotovideo2" src="/static/image2.png" style="height: 350rpx;"></image>
			  				<image @click="gotovideo2" src="/static/play.png" style="width: 100rpx; height: 100rpx;margin-top: -200rpx;"></image>
			  				<view style="font-size: 45rpx; font-weight: 900;margin-top: 100rpx;height: 230rpx;">养老金调整中的倾斜调整：高龄补贴</view>
			  		
				</view>
				<view v-show="showvideo2" class="video2">
				<view class="main1">
								  <image  src="/static/image2.png" style="width: 100%;display: inherit;margin-top: 250rpx;"></image>
								  <image  src="/static/play.png" style="height: 100rpx;width: 100rpx;float: left;margin-top: -300rpx;margin-left: 45%;"></image>
				</view>
				<view class="function">
					<image class="like" src="/static/like.png"></image>
								><image class="music" src="/static/music.png"></image>
				</view>
				<view class="comment">
								  <view class="text-1">@优酷看点</view>
								  <view @click="gotodetail2" class="text-2">老年人将享受这些福利政策，每一条都是好东西</view>
				</view>
				</view>
				<view v-show="showdetail2" class="main2">
								  <view class="context" space="nbsp">
								  医疗服务价格调整更加灵敏有度，实现医疗保障和医药服务高质量协同发展;\n全面推广沈阳智慧医保平台，
								  将医保公共服务惠及全市群众......日前，《沈阳市“十四五”医疗保障事业发展规划》发布，这些内容明确写入其中。
								  </view>
								  <view class="clicktoessay1" @click="gotoessay2">
									  <image class="clickbutton" src="/static/click.png"></image>
									  <text style="font-size: 45rpx;margin-left: -60rpx;font-weight: 600;">点击看全文</text>
								  </view>
				</view>
				<view class="likefunction">
								  <image v-show="showdetail2" class="likebutton" src="/static/like.png"></image>
				</view>
				
				
			  <view v-show="showessay2" class="essay2">
			<view class="title" space="nbsp">
				养老金调整中的倾斜调整：高龄补贴
			</view>
			
			<view style="background-color: #A6A6A6;width: 90%;height: 5rpx;margin-top: 5rpx;margin-left: auto;margin-right: auto;"></view>
			
			<view class="context" space="nbsp">
				像农村，大多数人没有缴纳职工养老保险，那么只能享受城乡居民养老保险待遇，在城乡居民养老保险中，对于高龄老人也有额外的补贴;\n
				一般来说，是从65周岁开始额外增加基础养老金，不过由于城乡居民养老金比较低，所以高龄补贴也不高，一般每月有2-5元。\n
				如青海，65岁以上老人每月增加5元基础养老金
			</view>
			  </view>
			  <view v-show="showessay2" class="likefunction">
				  <image style="position: fixed;bottom: 120rpx;right: 20rpx;" class="likebutton" src="/static/like.png"></image>
			  </view>
				
		  </van-tab>
		  <van-tab title="养生">
			  <view v-show="showyangsheng" class="content">
			  				<van-search shape="round" value:id=" value " style="width: 100%;" placeholder=" " />
			  	<view  style="background-color: #FAF0CA; width: 700rpx; border-radius:20rpx; height: 530rpx;padding-left: 20rpx;">
			  		<view><text style="font-size: 50rpx;font-weight: 800;">所在地区:{{location}}</text></view>
			  		<view><text style="font-size: 50rpx;font-weight: 800;">年龄:{{age}}</text></view>
			  		<view><text style="font-size: 50rpx;font-weight: 800;">性别:{{sex}}</text></view>
			  					<view style="margin-left: 550rpx;margin-top:-150rpx;">
			  						<image style="width: 100rpx; height: 100rpx;" src="../../static/gift.png"></image>
			  						<view style="font-weight: 1000;font-size: 40rpx;margin-left: -30rpx;">签到立领</view>
			  					</view>
			  		<view style="background-color: #333333;height: 5rpx;width: 720rpx;margin-top: 30rpx;margin-left: -20rpx;"></view>
			  		<view style="font-size: 50rpx;font-weight: 800;margin-left: 35rpx;">今日专属您的最新养生推荐</view>
			  					
			  					<view style="background-color: #F4D35E; width: 97%;height: 200rpx; border-radius: 20rpx;">
			  						<image  src="/static/loudspeaker.png" style="width: 60rpx; height: 60rpx; margin-top: 60rpx;"></image>
			  						<view style="font-size: 45rpx; font-weight: 900; margin-left: 80rpx;margin-top: -90rpx;">小白菜：味苦微寒，养胃和中，通肠利胃</view>
			  					</view>
			  	</view>
			  				
			  				<view style="background-color: #F95738; width: 90%; height: 5rpx; margin-top: 30rpx;"></view>
			  				<view style="font-size: 40rpx;">上拉更多信息</view>
			  				<view style="background-color: #F95738; width: 90%; height: 5rpx;"></view>
			  				<view style="font-size: 45rpx; font-weight: 900;">生活中懂点养生知识太重要了</view>
			  				<image @click="gotovideo3" src="/static/image3.png" style="height: 350rpx;"></image>
			  				<image @click="gotovideo3" src="/static/play.png" style="width: 100rpx; height: 100rpx;margin-top: -200rpx;"></image>
			  				<view style="font-size: 45rpx; font-weight: 900;margin-top: 100rpx;height: 230rpx;">寒露养生。寒露到，不露腿，三保暖，顺天意</view>
			  		
			  				</view>
							
							
							<view v-show="showvideo3" class="video3">
											  <image  src="/static/image3.png" style="width: 100%;display: inherit;margin-top: 250rpx;"></image>
											  <image  src="/static/play.png" style="height: 100rpx;width: 100rpx;float: left;margin-top: -300rpx;margin-left: 45%;"></image>
							</view>
							<view v-show="showvideo3" class="function">
								<image class="like" src="/static/like.png"></image>
								<image class="music" src="/static/music.png"></image>
							</view>
							<view v-show="showvideo3" class="comment">
											  <view class="text-1">@优酷看点</view>
											  <view @click="gotodetail3" class="text-2">生活中懂点养生知识太重要了</view>
							</view>
							
							<view v-show="showdetail3" class="detail3">
											  <view class="context" space="nbsp">
												  寒露养生。寒露到，不露腿，三保暖，顺天意。七点后，不进食，喝足水，防脑梗，寒露
												  ，标志着天气由凉爽向寒冷过渡，人体的阳气逐渐收敛。因此，寒露过后要避免受凉，少辛增酸
												  ，预防疾病
											  </view>
											  <view class="clicktoessay1" @click="gotoessay3">
											  		<image class="clickbutton" src="/static/click.png"></image>
											  		<text style="font-size: 45rpx;margin-left: -60rpx;font-weight: 600;">点击看全文</text>
											  </view>
							</view>
							<view v-show="showdetail3" class="likefunction">
											  <image class="likebutton" src="/static/like.png"></image>
							</view>
							
  <view v-show="showessay3" class="essay3">
			<view class="title" space="nbsp">
				寒露养生。寒露到，不露腿，三保暖，顺天意。
			</view>
			
			<view style="background-color: #A6A6A6;width: 90%;height: 5rpx;margin-top: 5rpx;margin-left: auto;margin-right: auto;"></view>
			
			<view class="context" space="nbsp">
				寒露养生。寒露到，不露腿，三保暖，顺天意。\n七点后，不进食，喝足水，防脑梗，寒露
				，标志着天气由凉爽向寒冷过渡，人体的阳气逐渐收敛。因此，寒露过后要避免受凉，少辛增酸
				，预防疾病
			</view>
			
			  </view>
			 <view v-show="showessay3" class="likefunction">
				<image class="likebutton" src="/static/like.png"></image>
			</view>
		  </van-tab>
		</van-tabs>
		<view style="background-color: #F95738;width: 100%;
		height: 120rpx;
		position:fixed;
		bottom: 0;
		display:flex;
		flex-direction:row;
		justify-content:flex-start;">
			<view @click="gotohome" id="button1">
			<image src="/static/home.png" style="width: 60rpx;height: 60rpx;margin-left: 50rpx;margin-top: 10rpx;"></image>
			<view style="margin-left: 47rpx;font-weight: 900;">首页</view>
			</view>
			<view @click="onshare" id="button2">
			<image src="/static/repsot.png" style="width: 60rpx;height: 60rpx;margin-left: 230rpx;margin-top: 10rpx;"></image>
			<view style="margin-left: 190rpx;font-weight: 900;">一键转发</view>
			</view>
			<view @click="gotomy" id="button3">
			<image src="/static/my.png" style="width: 60rpx;height: 60rpx;margin-left: 230rpx;margin-top: 10rpx;"></image>
			<view style="margin-left: 230rpx;font-weight: 900;">我的</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showShare:false,
				options: [
				      { name: '微信', icon: 'wechat', openType: 'share' },
				      { name: '微博', icon: 'weibo' },
				      { name: '复制链接', icon: 'link' },
				      { name: '分享海报', icon: 'poster' },
				      { name: '二维码', icon: 'qrcode' },
				    ],
				location:'山东',
				title: 'Hello',
				age:'60',
				sex:'女',
				flag:true,
				showvideo2:false,
				showvideo3:false,
				showdetail2:false,
				showdetail3:false,
				showessay2:false,
				showessay3:false,
				showyangsheng:true
			}
		},
		onLoad() {

		},
		onShow() {
			console.log("返回首页")
		},
		methods: {
			gotovideo1(){
				uni.navigateTo({
					url:"/pages/video1/video1"
				})
			},
			gotovideo2(){
				this.flag = !this.flag
				this.showvideo2 = !this.showvideo2
			},
			gotovideo3(){
				this.showyangsheng = !this.showyangsheng
				this.showvideo3 = !this.showvideo3
			},
			gotodetail2(){
				this.showvideo2 = false
				this.showdetail2 = true
			},
			gotodetail3(){
				this.showvideo3 = false
				this.showdetail3 = true
			},
			gotoessay2(){
				this.showdetail2 = false
				this.showessay2 = true
			},
			gotoessay3(){
				this.showdetail3 = false
				this.showessay3 = true
			},
			gotohome(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
			},
			onshare(){
				this.showShare = true
			},
			gotomy(){
				uni.navigateTo({
					url:"/pages/my/my"
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.text-area {
		display: flex;
		justify-content: center;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.function{
		display: flex;
		flex-direction: column;
		float: right;
	}
	.like{
		width: 100rpx;
		height: 100rpx;
	}
	.music{
		margin-top: 20rpx;
		width: 100rpx;
		height: 100rpx;
	}
	.comment{
	margin-top: 100rpx;
	width: 65%;
	}
	.text-1{
		font-size: 40rpx;
		font-weight: 800;
	}
	.text-2{
		font-size: 35rpx;
		font-weight: 600;
	}
	.clicktoessay1{
		display: flex;
		flex-direction: column;
		margin-left: 400rpx;
	}
	.clickbutton{
		width: 100rpx;
		height: 100rpx;
	}
	.likebutton{
		float: right;
		width: 120rpx;
		height: 120rpx;
	}
	.main2{
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		height: 800rpx;
		background-color: #F4D35E;
		border-radius: 20rpx;
	}
	.context{
		font-size: 50rpx;
		 text-indent: 20rpx;
		 text-align: left;
		 text-indent:2em
	}
	.essay2{
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		height: 800rpx;
	}
	.title{
		font-size: 50rpx;
		 text-indent: 10rpx;
		 text-align: left;
	}
	.context2{
		font-size: 40rpx;
		text-align: left;
		text-indent: 10rpx;
	}
	.detail3{
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		height: 800rpx;
		background-color: #F4D35E;
		border-radius: 20rpx;
	}
</style>
